<template>
	<view>		
		 <!-- #ifdef H5 -->
		 <view class="cu-card article"
		 :style="[{'margin-top':(0) + 'px'}]"
		 >
		 <!-- #endif -->
		 <!-- #ifndef H5 -->
		 <view class="cu-card article"
		 :style="[{'margin-top':(CustomBar+10) + 'px'}]"
		 >
		 <!-- #endif -->
		    <view class="cu-item shadow" v-for="(waterAddress, index) in waterAddressList" :key="index" :id="`waters-${waterAddress.id}`">	 
				<view class="flex p-xs margin-bottom-sm mb-sm align-center">
					<view class="flex-treble padding-sm margin-xs radius" style="border-right: 2upx solid #eeeeee;">
						<view><view class="text-cut text-bold">{{ waterAddress.houseName }}</view></view>
						<view class="padding-top-xs text-gray">{{ waterAddress.addr }}</view>
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						<view class="text-bold text-center" @click="goOrder(waterAddress)">去下单</view>
					</view>
				</view>
			</view>
		  </view>	
	</view>
</template>

<script>
	
	import {
		getHouseList
	} from '@/api/water.js';
	
	import {mapState, mapMutations} from 'vuex';
	
	export default {
	    data() {
	        return {
				CustomBar: this.CustomBar,
	            id:0, // 使用 marker点击事件 需要填写id
	            title: 'map',
	            latitude: 31.805707,
	            longitude: 117.237471,
				scale: 10,
	            covers: [{
	                latitude: 31.805707,
	                longitude: 117.237471
	            }, {
	                latitude: 31.80,
	                longitude: 117.23
	            }],
				waterAddressList: []
				
	        }
	    },
		onLoad() {
			this.getCategories();
		},
	    methods: {
		  ...mapMutations(['SET_ADDRESS', 'SET_ORDER_TYPE']),
		  getCategories: function() {
			let that = this;
			getHouseList().then(res => {
				that.waterAddressList = res.data;
			});
		  },
		goOrder: function(address) {
			console.log(address);
			this.SET_ADDRESS(address)
			
			this.SET_ORDER_TYPE('takeout')
			uni.switchTab({
				url: '/pages/food/water/index'
			})
		},
		
	 }
	}
</script>

<style>
.fixed {
		position: fixed;
		z-index: 99;
	}
</style>
